.dots-1 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: d1 .5s infinite alternate linear;
}

@keyframes d1 {
  50% {
    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px
  }

  100% {
    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px
  }
}

.dots-2 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px;
  position: relative;
  animation: d2-0 2s infinite linear;
}

.dots-2:before,
.dots-2:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: currentColor;
  transform: rotate(0deg) translate(18px);
  animation: d2 1s infinite;
}

.dots-2:after {
  animation-delay: -.5s
}

@keyframes d2-0 {
  100% {
    transform: rotate(1turn)
  }
}

@keyframes d2 {
  100% {
    transform: rotate(1turn) translate(20px)
  }
}

.dots-3 {
  width: 50px;
  height: 28px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) 50% 0,
    radial-gradient(farthest-side, currentColor 90%, #0000) 100% 0;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: d3-0 1.5s linear infinite;
}

.dots-3:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  left: 0;
  top: 0;
  animation:
    d3-1 1.5s linear infinite,
    d3-2 0.5s cubic-bezier(0, 200, .8, 200) infinite;
}

@keyframes d3-0 {

  0%,
  31% {
    background-position: 50% 0, 100% 0
  }

  33% {
    background-position: 50% 100%, 100% 0
  }

  43%,
  64% {
    background-position: 50% 0, 100% 0
  }

  66% {
    background-position: 50% 0, 100% 100%
  }

  79% {
    background-position: 50% 0, 100% 0
  }

  100% {
    transform: translateX(calc(-100%/3))
  }
}

@keyframes d3-1 {
  100% {
    left: calc(100% + 7px)
  }
}

@keyframes d3-2 {
  100% {
    top: -0.1px
  }
}

.dots-4 {
  width: 88px;
  height: 12px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) 25% 0,
    radial-gradient(farthest-side, currentColor 90%, #0000) 75% 0;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: d4-0 1s linear infinite;
}

.dots-4:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  inset: 0;
  margin: auto;
  animation: d4-1 1s cubic-bezier(0.5, 300, 0.5, -300) infinite;
}

@keyframes d4-0 {

  0%,
  24% {
    background-position: 25% 0, 75% 0
  }

  40% {
    background-position: 25% 0, 85% 0
  }

  50%,
  72% {
    background-position: 25% 0, 75% 0
  }

  90% {
    background-position: 15% 0, 75% 0
  }

  100% {
    background-position: 25% 0, 75% 0
  }
}

@keyframes d4-1 {
  100% {
    transform: translate(0.1px)
  }
}

.dots-5 {
  width: 50px;
  height: 12px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) left,
    radial-gradient(farthest-side, currentColor 90%, #0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
}

.dots-5:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  inset: 0;
  margin: auto;
  animation: d5-1 1s, d5-2 0.5s;
  animation-timing-function: cubic-bezier(.5, -900, .5, 900);
  animation-iteration-count: infinite;
}

@keyframes d5-1 {
  100% {
    transform: translate(0.12px)
  }
}

@keyframes d5-2 {
  100% {
    inset: -0.15px 0 0;
  }
}


.dots-6 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow:
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0 0 5px, 38px 0 0 5px, 57px 0 0 5px,
    19px 19px 0 0px, 38px 19px 0 0px, 57px 19px 0 0px;
  transform: translateX(-38px);
  animation: d6 2s infinite linear;
}

@keyframes d6 {
  12.5% {
    box-shadow:
      19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 5px,
      19px 0 0 5px, 38px 0 0 0px, 57px 0 0 5px,
      19px 19px 0 0px, 38px 19px 0 0px, 57px 19px 0 0px
  }

  25% {
    box-shadow:
      19px -19px 0 5px, 38px -19px 0 0px, 57px -19px 0 5px,
      19px 0 0 0px, 38px 0 0 0px, 57px 0 0 0px,
      19px 19px 0 0px, 38px 19px 0 5px, 57px 19px 0 0px
  }

  50% {
    box-shadow:
      19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0px,
      19px 0 0 0px, 38px 0 0 0px, 57px 0 0 0px,
      19px 19px 0 0px, 38px 19px 0 0px, 57px 19px 0 5px
  }

  62.5% {
    box-shadow:
      19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
      19px 0 0 5px, 38px 0 0 0px, 57px 0 0 0px,
      19px 19px 0 0px, 38px 19px 0 5px, 57px 19px 0 5px
  }

  75% {
    box-shadow:
      19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
      19px 0 0 0px, 38px 0 0 0px, 57px 0 0 5px,
      19px 19px 0 0px, 38px 19px 0 0px, 57px 19px 0 5px
  }

  87.5% {
    box-shadow:
      19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
      19px 0 0 0px, 38px 0 0 5px, 57px 0 0 0px,
      19px 19px 0 5px, 38px 19px 0 0px, 57px 19px 0 0px
  }
}


.dots-7 {
  width: 50px;
  height: 12px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) left,
    radial-gradient(farthest-side, currentColor 90%, #0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
}

.dots-7:before,
.dots-7:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  clip-path: inset(0 0 50%);
  inset: 0;
  margin: auto;
  transform-origin: -13px 50%;
  animation: d7 .5s infinite alternate;
}

.dots-7:after {
  --s: -1;
  transform-origin: calc(100% + 13px) 50%;
}

@keyframes d7 {

  0%,
  40% {
    transform: scaleY(var(--s, 1)) rotate(0)
  }

  100% {
    transform: scaleY(var(--s, 1)) rotate(calc(var(--s, 1)*-90deg))
  }
}


.dots-8 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  clip-path: inset(-26px);
  animation: d8 2s infinite linear;
}

@keyframes d8 {
  0% {
    box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
  }

  10% {
    box-shadow: 0 0 0 0, 12px 0, -40px 0, 0 40px, 0 -40px
  }

  20% {
    box-shadow: 0 0 0 4px, 0px 0, -40px 0, 0 40px, 0 -40px
  }

  30% {
    box-shadow: 0 0 0 4px, 0px 0, -12px 0, 0 40px, 0 -40px
  }

  40% {
    box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 40px, 0 -40px
  }

  50% {
    box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 12px, 0 -40px
  }

  60% {
    box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -40px
  }

  70% {
    box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -12px
  }

  80% {
    box-shadow: 0 0 0 16px, 0px 0, 0px 0, 0 0px, 0 0px
  }

  90%,
  100% {
    box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
  }
}

.dots-9 {
  width: 31px;
  height: 31px;
  display: flex;
  justify-content: space-between;
  animation: d9-0 1s infinite;
}

.dots-9::before,
.dots-9::after {
  content: "";
  width: 12px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) top,
    radial-gradient(farthest-side, currentColor 90%, #0000) bottom;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  transform-origin: 50% calc(100% - 6px);
  animation: inherit;
  animation-name: d9-1;
}

.dots-9::after {
  --s: -1;
}

@keyframes d9-0 {
  100% {
    transform: translateY(calc(12px - 100%))
  }
}

@keyframes d9-1 {
  100% {
    transform: rotate(calc(var(--s, 1)*-180deg))
  }
}

.dots-10 {
  width: 31px;
  height: 31px;
  display: flex;
  justify-content: space-between;
}

.dots-10::before,
.dots-10::after {
  content: "";
  width: 12px;
  background:
    radial-gradient(farthest-side, currentColor 90%, #0000) top,
    radial-gradient(farthest-side, currentColor 90%, #0000) bottom;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  transform-origin: 50% calc(100% - 6px);
  animation: d10 1s infinite;
}

.dots-10::after {
  transform-origin: 50% 6px;
}

@keyframes d10 {

  70%,
  100% {
    transform: rotate(-270deg)
  }
}